<template>
	<div>
		<div id="query">
			<el-header class="el-header"style="text-align: center">
				<i class="el-icon-s-check" style="margin-right: 15px"></i>
				<span>检查处置</span>
			</el-header>
		</div>
		<div style="margin-top: 15px;">
			<el-input placeholder="请输入内容" v-model="input" class="input-with-select" style="width: 500px;">
				<el-select v-model="select" slot="prepend" placeholder="请选择">
					<el-option label="分类" value="1"></el-option>
					<el-option label="科室" value="2"></el-option>
				</el-select>
				<el-button slot="append" icon="el-icon-search" @click="Query"></el-button>
			</el-input>
			<el-button type="success" style="margin-left: 100px;" @click="dialogFormVisible = true">添加检查项目</el-button>
		</div>
		<div>
			<el-table :data="tableData" style="width: 100%">
				<el-table-column prop="disid" label="编号" width="120">
					<template slot-scope="scope">
						<span v-if="!scope.row.isEdit">{{scope.row.disid}}</span>
						<el-input v-if="scope.row.isEdit" v-model="scope.row.disid"></el-input>
					</template>
				</el-table-column>
				<el-table-column prop="name" label="患者姓名" width="120">
					<template slot-scope="scope"><span v-if="!scope.row.isEdit">{{scope.row.name}}</span>
						<el-input v-if="scope.row.isEdit" v-model="scope.row.name"></el-input>
					</template>
				</el-table-column>
				<el-table-column prop="sort" label="分类" width="120">
					<template slot-scope="scope"><span v-if="!scope.row.isEdit">{{scope.row.sort}}</span>
						<el-input v-if="scope.row.isEdit" v-model="scope.row.sort"></el-input>
					</template>
				</el-table-column>
				<el-table-column prop="item" label="检查项目" width="120">
					<template slot-scope="scope"><span v-if="!scope.row.isEdit">{{scope.row.item}}</span>
						<el-input v-if="scope.row.isEdit" v-model="scope.row.item"></el-input>
					</template>
				</el-table-column>
				<el-table-column prop="dep" label="执行科室" width="120">
					<template slot-scope="scope"><span v-if="!scope.row.isEdit">{{scope.row.dep}}</span>
						<el-input v-if="scope.row.isEdit" v-model="scope.row.dep"></el-input>
					</template>
				</el-table-column>
				<el-table-column prop="whe" label="是否加急" width="120">
					<template slot-scope="scope"><span v-if="!scope.row.isEdit">{{scope.row.whe}}</span>
						<el-input v-if="scope.row.isEdit" v-model="scope.row.whe"></el-input>
					</template>
				</el-table-column>
				<el-table-column prop="price" label="单价" width="120">
					<template slot-scope="scope"><span v-if="!scope.row.isEdit">{{scope.row.price}}</span>
						<el-input v-if="scope.row.isEdit" v-model="scope.row.price"></el-input>
					</template>
				</el-table-column>
				<el-table-column prop="docid" label="门诊医生编号" width="120">
					<template slot-scope="scope"><span v-if="!scope.row.isEdit">{{scope.row.docid}}</span>
						<el-input v-if="scope.row.isEdit" v-model="scope.row.docid"></el-input>
					</template>
				</el-table-column>
				<el-table-column prop="tid" label="检查医生编号" width="120">
					<template slot-scope="scope"><span v-if="!scope.row.isEdit">{{scope.row.tid}}</span>
						<el-input v-if="scope.row.isEdit" v-model="scope.row.tid"></el-input>
					</template>
				</el-table-column>
		<!-- 		<el-table-column prop="fees" label="挂号费" width="120">
					<template slot-scope="scope"><span v-if="!scope.row.isEdit">{{scope.row.fees}}</span>
						<el-input v-if="scope.row.isEdit" v-model="scope.row.fees"></el-input>
					</template>
				</el-table-column> -->
				<el-table-column prop="function" label="操作">
					<template slot-scope="scope">
						<el-button v-if="!scope.row.isEdit" type="primary " @click="Change(scope.$index,scope.row)">修改
						</el-button>
						<el-button v-if="scope.row.isEdit" type="success "
							@click="CompleteChange(scope.$index,scope.row)">修改完成</el-button>
						<el-button type="danger " @click="Delete(scope.$index)"
							@click.native.prevent="deleteRow(scope.$index, tableData)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<div>
			<el-row>
				<!-- <el-button type="danger" round @click="dialogFormVisible = true">添加用户</el-button> -->

				<el-dialog title="新增用户" :visible.sync="dialogFormVisible">
					<el-form :model="form">
						<el-form-item label="编号" :label-width="formLabelWidth">
							<el-input v-model="form.disid" autocomplete="off"></el-input>
						</el-form-item>
						<el-form-item label="姓名" :label-width="formLabelWidth">
							<el-input v-model="form.name" autocomplete="off"></el-input>
						</el-form-item>
						<el-form-item label="分类" :label-width="formLabelWidth">
							<el-input v-model="form.sort" autocomplete="off"></el-input>
						</el-form-item>
						<el-form-item label="检查项目" :label-width="formLabelWidth">
							<el-input v-model="form.item" autocomplete="off"></el-input>
						</el-form-item>
						<el-form-item label="执行科室" :label-width="formLabelWidth">
							<el-input v-model="form.dep" autocomplete="off"></el-input>
						</el-form-item>
						<el-form-item label="是否加急" :label-width="formLabelWidth">
							<el-input v-model="form.whe" autocomplete="off"></el-input>
						</el-form-item>
						<el-form-item label="单价" :label-width="formLabelWidth">
							<el-input v-model="form.price" autocomplete="off"></el-input>
						</el-form-item>
						<el-form-item label="门诊医生编号" :label-width="formLabelWidth">
							<el-input v-model="form.docid" autocomplete="off"></el-input>
						</el-form-item>
						<el-form-item label="检查医生编号" :label-width="formLabelWidth">
							<el-input v-model="form.tid" autocomplete="off"></el-input>
						</el-form-item>
						<!-- <el-form-item label="挂号费" :label-width="formLabelWidth">
							<el-input v-model="form.fees" autocomplete="off"></el-input>
						</el-form-item> -->


					</el-form>
					<div slot="footer" class="dialog-footer">
						<el-button @click="dialogFormVisible = false">取 消</el-button>
						<el-button type="primary " @click="Add()">确 定</el-button>
					</div>
				</el-dialog>
			</el-row>
		</div>
	</div>
</template>



<style>
	.el-header {
		text-align: left;
		font-size: 40px;
		border-radius: 4px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
		background-color: #4fc1b0;
	}

	.el-select .el-input {
		width: 130px;
	}

	.input-with-select .el-input-group__prepend {
		background-color: #fff;
	}
</style>
<script>
import axios from 'axios';
import {showMsgTitle} from '@/utils/api2'
import {showMsgConfirm} from '@/utils/api2'
import {getRequest}   from '@/utils/api2'
import {postRequest}  from '@/utils/api2'
	export default {
		data() {
			return {
				isEdit: false, //编辑
				// msg1: '用户管理',
				input: '',
				select: '',
				tableData: [{}],
				dialogFormVisible: false,
				form: {
					disid: '',
					whe: '',
					name: '',
					item: '',
					dep: '',
					price: '',
					quota: '',
					fees:'',
					title: '',
				},
				formLabelWidth: '120px'
			}
		},
		mounted: function() {
			let url = "/disposal";
			let _this = this;
			getRequest(url).then(resp => {
			    if (resp.status == 200) {
			    	//alert(resp.data);
			      _this.tableData = resp.data;
			    } else {
			      _this.$message({type: 'error', message: '数据加载失败1!'});
			    }
			  }, resp => {
			    _this.loading = false;
			    if (resp.response.status == 403) {
			      _this.$message({type: 'error', message: resp.response.data});
			    } else {
			      _this.$message({type: 'error', message: '数据加载失败2!'});
			    }
			  }).catch(resp => {
			    //压根没见到服务器
			    _this.loading = false;
			    _this.$message({type: 'error', message: '数据加载失败3!'});
			  });
			
		},
		methods: {
			deleteRow(index, rows) {
				rows.splice(index, 1);
			},
			Query() {			
				let url = "/disposal";
				let _this = this;
				getRequest(url).then(resp => {
						if (this.select == '') {
							this.$message({
								showClose: true,
								type: "false",
								message: "请选择查询方式"
							});
						} else if (this.select == 2) {
							this.tableData = [];
							for (var i = 0; i < resp.data.length; i++) {
								if (this.input == resp.data[i].disid) {
									this.tableData.push(resp.data[i]);
								}
								if (this.input == '') {
									this.tableData = resp.data;
								}
							}
						} else if (this.select == 1) {
							this.tableData = [];
							for (var i = 0; i < resp.data.length; i++) {
								if (this.input == resp.data[i].name) {
									this.tableData.push(resp.data[i]);
								}
								if (this.input == '') {
									this.tableData = resp.data;
								}
							}
						}
					})
			}, //query end
			Add() {
				
				
				/********************/
				this.dialogFormVisible = false;
				console.log(this.form);
				postRequest('/insertDisposal',this.form);
				this.$message({
					showClose: true,
					type: "success",
					message: "添加成功"
				});
				//location.href='/user_admin'				
				/**************************/
				/***************动态添加行****************/
				if (this.tableData == undefined) {
				        this.tableData = new Array();
				      }			
						let obj = {};
						obj.depid = this.form.depid;
						obj.deptype =this.form.deptype;
						obj.name =this.form.name;
						obj.number =0;
				      this.tableData.push(this.form);
				/*********************************/	
			}, //Add end
			Delete(index) {
				
				let _this=this
				console.log('这是删除传递的信息：',this.tableData[index])
				postRequest('/deleteDisposal', this.tableData[index]);
				this.$message({
					showClose: true,
					type: "success",
					message: "删除成功"
				});
			}, //delete end
			Change(index, row) {
				this.$set(row, 'isEdit', true);
			}, //change end
		CompleteChange(index, row) {
			this.$set(row, 'isEdit', false);
			console.log(this.tableData);
			let data = JSON.stringify({
				disid: this.tableData[index].disid,
				sort: this.tableData[index].sort,
				name: this.tableData[index].name,
				item: this.tableData[index].item,
				dep: this.tableData[index].dep,
				whe: this.tableData[index].whe,
				price: this.tableData[index].price,
				// title: this.tableData[index].title,
				// fees: this.tableData[index].fees,
			});
			// console.log(data);
			/********************/
			// console.log(data);
			// console.log(this.tableData[index]);
			console.log('这是修改的信息：',this.tableData[index])
			postRequest('/updataDisposal', this.tableData[index]);
		
			//location.href='/user_admin'				
			/**************************/
		} //change end
		} //method end
	 }
</script>
